<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery.js"></script>
    <script src="./danMu.js"></script>
    <script src="./jessibuca.js"></script>
    <style>
        .root {
            display: flex;
            place-content: center;
            margin-top: 3rem;
        }

        .container-shell {
            backdrop-filter: blur(5px);
            background: hsla(0, 0%, 50%, 0.5);
            padding: 30px 4px 10px 4px;
            /* border: 2px solid black; */
            width: auto;
            position: relative;
            border-radius: 5px;
            box-shadow: 0 10px 20px;
        }

        .container-shell:before {
            content: "jessibuca demo player";
            position: absolute;
            color: darkgray;
            top: 4px;
            left: 10px;
            text-shadow: 1px 1px black;
        }

        .container-wrap {
            width: 640px;
            height: 398px;
            position: relative;
        }

        #container {
            background: rgba(13, 14, 27, 0.7);
            width: 640px;
            height: 398px;
        }

        .input {
            display: flex;
            margin-top: 10px;
            color: white;
            place-content: stretch;
        }

        .input2 {
            bottom: 0px;
        }

        .input input {
            flex: auto;
        }

        .err {
            position: absolute;
            top: 40px;
            left: 10px;
            color: red;
        }

        .option {
            position: absolute;
            top: 4px;
            right: 10px;
            display: flex;
            place-content: center;
            font-size: 12px;
        }

        .option span {
            color: white;
        }

        .page {
            background: url('./bg.jpg');
            background-repeat: no-repeat;
            background-position: top;
        }

        .danmustage {
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 2;
            color: #fff;
            overflow: hidden;
            font-size: 20px;
        }

        @media (max-width: 720px) {
            #container {
                width: 90vw;
                height: 52.7vw;
            }

            .container-wrap {
                width: 90vw;
                height: 52.7vw;
            }
        }
    </style>
</head>
<body class="page">
<div class="root">
    <div class="container-shell">
        <div class="container-wrap">
            <div id="container"></div>
            <div class="danmustage"></div>
        </div>

        <div class="input">
            <div>输入URL：</div>
            <input
                autocomplete="on"
                id="playUrl"
                value="http://flv.bdplay.nodemedia.cn/live/bbb.flv"
            />
            <button id="play">播放</button>
            <button id="pause" style="display: none">停止</button>
        </div>
        <div class="input" style="line-height: 30px">
            <button id="destroy">销毁</button>
        </div>
    </div>
</div>

<script>
    var $player = document.getElementById('play');
    var $pause = document.getElementById('pause');
    var $playHref = document.getElementById('playUrl');
    var $container = document.getElementById('container');
    var $destroy = document.getElementById('destroy');


    var showOperateBtns = true; // 是否显示按钮
    var forceNoOffscreen = true; //
    var jessibuca = null;

    function create() {
        jessibuca = new Jessibuca({
            container: $container,
            videoBuffer: 0.2, // 缓存时长
            isResize: false,
            text: "",
            loadingText: "加载中",
            debug: true,
            showBandwidth: showOperateBtns, // 显示网速
            operateBtns: {
                fullscreen: showOperateBtns,
                screenshot: showOperateBtns,
                play: showOperateBtns,
                audio: showOperateBtns,
            },
            forceNoOffscreen: forceNoOffscreen,
            isNotMute: false,
        },);

        jessibuca.onLog = msg => console.error(msg);
        jessibuca.onRecord = (status) => console.log('onRecord', status);
        jessibuca.onPause = () => console.log('onPause');
        jessibuca.onPlay = () => console.log('onPlay');
        jessibuca.onFullscreen = msg => console.log('onFullscreen', msg);
        jessibuca.onMute = msg => console.log('onMute', msg);
        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        $destroy.style.display = 'none';
    }


    create();


    //初始的弹幕数据
    var danmuData = [
        '哈哈哈哈哈哈哈',
        '弹幕来袭~',
        '前面的 你肥皂掉了！！',
        "前方高能，一大波弹幕来袭！",
        "不约，叔叔我们不约~",
        "今天没吃药，感觉自己萌萌哒",
        "走开，让专业的来",
        "23333333333~~~~~",
        "请允许我做一个悲伤的表情",
        "警察叔叔，就是这个人",
        "为什么放弃治疗",
        "放开那个人，让我来",
        "噗……节操去了哪里啊都！！",
        "膜拜老司机",
        "你咋不上天呢",
        "666",
        "666666666666666666666666~~~",
        "放开她，让我来！！！",
        "德里克。。。。test 。。。",
        "666~~~~~~~~~！！！！！",
        "前方高能 非战斗人员紧急撤离",
        "妈妈问我为什么跪着看电脑_(:_」∠)_",
        "他说的好有道理 我竟无言以对",
        '小六 你好靓吖',
        '我基本是只废猫(≥◇≤)',
        '这个是真的耶',
        '弹幕走一波~~~~~~~~~~~~~~~~~~~~~~~~~~',
        '我似乎听到有人说我帅',
        '什么？！你刚才说我帅？',
        '~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~我是天空中最亮的星星~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~',
        '好多人啊',
        '喂，妖妖灵吗，这里有人在装逼。。',
        '对方不想和你说话,并向你扔了一条狗。。。',
        '前面那个说我帅的别走啊啊啊啊',
        '你们玩，我静静地看着',
        '我就静静看着你',
        '超级羞羞',
        '好想你',
        '我想你！',
        '你真帅~',
        '你肚子好大！！',
        '最近变胖了，悲伤'
    ];

    //实例化弹幕
    var dm = new danMu({
        device: 'pc',//m代表移动端弹幕,不设置或设为pc代表pc端弹幕
        stage: $(".danmustage"),
        comments: danmuData,
        danMuHtml: "<span>{comment}</span>",
        colors: ["#fff", "#00ccff", "#ff0000", "#00ff00", "#fef500"],
        flyTime: 7000,
        timeInterval: 1200,
        randomSort: true,
        hSpacing: 0.8,
        direction: 'v'
    });
    console.log(dm);
    dm.pause();


    $player.addEventListener('click', function () {
        var href = $playHref.value;
        if (href) {
            jessibuca.play(href);
            $player.style.display = 'none';
            $pause.style.display = 'inline-block';
            $destroy.style.display = 'inline-block';
            dm.play();

        }
    }, false)


    $pause.addEventListener('click', function () {
        $player.style.display = 'inline-block';
        $pause.style.display = 'none';
        jessibuca.pause();
        dm.pause();
    })

    $destroy.addEventListener('click', function () {
        if (jessibuca) {
            jessibuca.destroy().then(() => {
                dm.pause();
                create();
            });
        } else {
            dm.pause();
            create();
        }

    })

</script>

</body>
</html>
